<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Modern Synth UI</title>
    <style>
        /* 合成器主容器 */
        .synth-container {
            background: linear-gradient(145deg, #2d2d2d, #1a1a1a);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 0 30px rgba(0, 255, 150, 0.2);
            width: 600px;
            margin: 50px auto;
        }

        /* 旋钮控制面板 */
        .knob-panel {
            display: flex;
            justify-content: space-around;
            margin: 30px 0;
        }

        /* 旋钮样式 */
        .knob {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #333;
            border: 3px solid #00ff96;
            position: relative;
            box-shadow: 0 0 15px rgba(0, 255, 150, 0.3);
        }

        /* 旋钮指示器 */
        .knob-indicator {
            width: 4px;
            height: 30px;
            background: #00ff96;
            position: absolute;
            left: 50%;
            top: -15px;
            transform-origin: bottom center;
            transform: translateX(-50%) rotate(0deg);
        }

        /* 参数显示 */
        .parameter-display {
            color: #00ff96;
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin-top: 15px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="synth-container">
        <div class="knob-panel">
            <div class="knob-container">
                <div class="knob">
                    <div class="knob-indicator"></div>
                </div>
                <div class="parameter-display">FREQ: <span id="freq-value">440</span>Hz</div>
            </div>
            <div class="knob-container">
                <div class="knob">
                    <div class="knob-indicator"></div>
                </div>
                <div class="parameter-display">MOD: <span id="mod-value">0.5</span></div>
            </div>
        </div>
    </div>

    <script>
        // 旋钮交互逻辑
        class KnobController {
            constructor(knobElement, valueElement) {
                this.knob = knobElement;
                this.indicator = knobElement.querySelector('.knob-indicator');
                this.valueElement = valueElement;
                this.isDragging = false;
                this.currentRotation = 0;

                this.bindEvents();
            }

            bindEvents() {
                // 改进鼠标事件处理
        this.knob.addEventListener('mousedown', (e) => {
            e.preventDefault();
                    this.isDragging = true;
                    const rect = this.knob.getBoundingClientRect();
                    this.centerX = rect.left + rect.width / 2;
                    this.centerY = rect.top + rect.height / 2;
                    this.startAngle = this.currentRotation;
                });

                document.addEventListener('mousemove', (e) => {
                    if (this.isDragging) {
                        const offsetX = e.clientX - this.centerX;
                        const offsetY = this.centerY - e.clientY;
                        
                        // 使用极坐标计算旋转角度
                        let angle = Math.atan2(offsetY, offsetX) * (180 / Math.PI);
                        angle = (angle + 90 + 360) % 360;

                        // 计算角度差并应用平滑旋转
                        const angleDiff = angle - this.startAngle;
                        const smoothFactor = 0.2;
                        this.currentRotation = Math.min(360, Math.max(0, angle));
                        this.currentRotation += angleDiff * smoothFactor;

                        // 更新指针位置
                        const radius = rect.width / 2;
                        const radians = this.currentRotation * (Math.PI / 180);
                        const edgeX = this.centerX + Math.cos(radians) * radius;
                        const edgeY = this.centerY - Math.sin(radians) * radius;
                        this.indicator.style.left = `${edgeX - rect.left}px`;
                        this.indicator.style.top = `${edgeY - rect.top}px`;
                        this.updateRotation();
                    }
                });

                document.addEventListener('mouseup', () => {
                    this.isDragging = false;
                });
            }

            updateRotation() {
                this.indicator.style.transform = `translateX(-50%) rotate(${this.currentRotation}deg)`;
                const normalizedValue = this.currentRotation / 360;
                this.valueElement.textContent = normalizedValue.toFixed(2);
            }
        }

        // 初始化旋钮
        const freqKnob = new KnobController(
            document.querySelector('.knob-container:first-child .knob'),
            document.getElementById('freq-value')
        );

        const modKnob = new KnobController(
            document.querySelector('.knob-container:nth-child(2) .knob'),
            document.getElementById('mod-value')
        );
    </script>
</body>
</html>